<template>
  <view :class="[isOldStyle ? 'service-zone old' : 'service-zone old']" :style="`${styles}`">
    <view class="title">智慧助残服务专区</view>

    <view class="service-zone-auth">
      <view class="left">
        <img
          src="https://zjcl-ywpt.oss-cn-hangzhou-zwynet-d01-a.internet.cloud.zj.gov.cn/zlb-zhzc/zhzc-serviceZone-user.png"
          alt="">
        <text>您好：{{ name }}</text>
      </view>

      <!-- <view class="version-box" @click="handleCheckVersion">
        <image class="version" src="./version.png" mode="scaleToFill" />
        <text>{{ isOldStyle ? '常规版' : '老年版' }}</text>
      </view> -->

      <view class="right">
        <view class="logo-box">
            <view @click="handleCatDetail({ name: '我的关联' })">
                {{ userState == '未关联' ? '立即关联 >' : '已关联' }}
            </view>
        </view>
      </view>


    </view>

    <view class="phone-box" v-if="isOldStyle">
      <view class="c-banber-old">
        <view class="call-box">
          <image src="./call.png" alt="" />
        </view>
        <view class="rexian">政务服务热线</view>
        <view class="boda" @click="handleToPhone('12345')">去拨打</view>
      </view>
    </view>
  </view>
</template>


<script lang="ts" setup>
import { ref } from "vue";
const props = defineProps({
  styles: String,
  name: String,
  nationList: Array,
  index: Number,
  isOldStyle: Boolean,
  userState:String
})
const emits = defineEmits(['handleCheckedNation', 'handleClick','handleCheckVersion','handleCatDetail'])

let styles = ref('')
if (props.styles) {
  styles.value = props.styles?.replace(/"/g, '');
}

const index = props.index ? ref(props.index) : ref(0);

const nationList = props.nationList ? ref(props.nationList) : ref(['本人']);

const bindPickerChange = (e: any) => {
  index.value = e.detail.value;
  emits('handleCheckedNation', e.detail.value);
}

//打电话-政务服务网
const handleToPhone = (telphone: string) => {
  emits('handleClick', {
    type: 'tel',
    phone: telphone,
    content:'拨打政务服务网'
  })
}

//切换版本
const handleCheckVersion = ()=>{
  emits('handleCheckVersion')
}

//关联
const handleCatDetail =()=>{
  emits('handleCatDetail')
}

</script>


<style lang="scss" scoped>
.service-zone {
  width: 100%;
  position: relative;
  overflow: hidden;
  left: 0px;
  top: 0px;
  min-height: 568upx;
  line-height: 40upx;
  background: linear-gradient(180deg, rgba(3, 102, 241, 1) 60%, rgba(3, 102, 241, 0) 100%);



  .title {
    font-size: 52upx;
    color: #ffffff;
    width: 100%;
    height: 90upx;
    line-height: 90upx;
    text-indent: 24upx;
    margin-top: 20upx;
    font-weight: bold;
  }

  .service-zone-auth {
    width: calc(100% - 48upx);
    height: 50upx;
    display: flex;
    justify-content: space-between;
    border-radius: 21px;
    color: rgba(255, 255, 255, 1);
    font-size: 24upx;
    text-align: center;
    font-family: -apple-system;
    align-items: center;
    margin: 12upx auto 12upx auto;

    .version-box {
      display: flex;
      align-items: center;

      .version {
        width: 32upx;
        height: 32upx;
        margin-right: 12upx;
      }
    }



    .left,
    .right {
      display: flex;
      align-items: center;
      justify-content: space-around;

      .logo-box{
        color: #0366F1;
        font-weight: bold;
        font-size: 24upx;
        background: #ffffff;
        padding: 6px 12px;
        border-radius: 15px;
      }

      img {
        width: 32upx;
        height: 32upx;
      }
    }



    img {
      width: 32upx;
      height: 32upx;
      margin-right: 10upx;
    }
  }

  .phone-box {
    background: rgb(3, 102, 241);
    height: 158upx;
    padding: 20upx 0;

    .c-banber-old {
      width: 702upx;
      height: 138upx;
      margin: 0upx auto 20upx auto;
      z-index: 99;
      position: relative;
      display: flex;
      justify-content: space-around;
      background: #ffffff;
      border-radius: 80upx;
      align-items: center;

      .call-box {
        width: 80upx;
        height: 80upx;
        background: #16b998;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 48upx;
          height: 48upx;
        }
      }

      .rexian {
        font-size: 52upx;
        font-weight: bold;
        color: rgba(54, 58, 68, 1);
      }

      .boda {
        width: 194upx;
        height: 81upx;
        line-height: 52upx;
        border-radius: 42upx;
        background-color: rgba(70, 184, 151, 0);
        color: rgba(54, 58, 68, 1);
        font-size: 36upx;
        text-align: center;
        font-family: Roboto;
        border: 2upx solid rgba(54, 58, 68, 1);
        line-height: 81upx;
        font-weight: bold;
        color: rgba(54, 58, 68, 1);
      }
    }
  }
}


.old {
  .service-zone-auth {
    font-size: 34upx;

    .left img {
      width: 42upx;
      height: 42upx;
    }

  }
}
</style>